<template lang="pug">
  v-container
    v-card
      v-toolbar(color="purple darken-4" dark dense)
        v-toolbar-title 基本信息
        v-spacer
        v-toolbar-items
          v-btn(text @click="$emit('toggleModel', 'edit')") 编辑
      v-form(ref="form")
        v-container(grid-list-lg)
          v-layout(wrap)
            v-flex(v-for="f in fields" xs12 md4)
              h4.body-2 {{ label(f) }}
              p.body-1.text--primary {{ customer[f] }}

    // v-card.mt-10
      v-tabs(center-active v-model="activeTab" background-color="purple darken-4" dark)
        v-tab(v-for="tab in tabs" :key="tab['id']") {{ tab.label }}
        v-tab-item(v-for="tab in tabs" :key="tab['id']")
          component(:is="tab.component" :asset="asset")
</template>

<script lang="ts">
  import Vue, {VueConstructor} from 'vue'
  import {Customer, CustomerLang} from '@/store/modules/types/Customer'

  export default (Vue as VueConstructor<Vue & {}>).extend({
    name: 'customer_form',
    props: ['customer'],
    methods: {
      label(key: string): string {
        return CustomerLang[key]
      }
    },
    data() {
      return {
        fields: Object.keys(CustomerLang)
      }
    }
  })
</script>